<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>11_获取DOM对象的6钟方式</title>
    </head>
    <body>
        <!-- document.getElementById          通过id属性获取dom对象-->             
        <!-- document.getElementsByTagName    通过标签名字获取dom对象-->  
        <!-- document.getElementsByClassName  通过class属性获取dom对象-->  
        <!-- document.getElementsByName       通过name属性获取dom对象-->  
        <!-- document.querySelector           通过选择器获取dom对象-->  
        <!-- document.querySelectorAll        通过选择器获取dom对象-->  


        <ul>
            <li id="l1">米线</li>
            <li class="l2">锅包肉</li>
            <li class="l2">酸菜肉蒸饺</li>
            <li name="l3">干煸茧蛹</li>
            <li name="l3">五花肉辣白菜</li>
            <li>铁锅炖大雁</li>
            <li>炸蘑菇</li>
            <li>驴肉馅饺子</li>
        </ul>

        <script>
            // （1）document.getElementById          通过id属性获取dom对象
            // 返回值：是一个对象
            // 参数：  id值
            // var li = document.getElementById('l1');
            // console.log(li);


            // （2）document.getElementsByTagName    通过标签名字获取dom对象
            // 返回值：伪数组---长成了数组的样子 但是不能使用数组的方法
            // 参数： 标签名字
            // var li_list = document.getElementsByTagName('li');
            // console.log(li_list);
            // console.log(li_list.length);


            // （3）document.getElementsByClassName  通过class属性获取dom对象
            // 返回值：伪数组---长成了数组的样子 但是不能使用数组的方法
            // 参数：  class的属性值
            // var li_list = document.getElementsByClassName('l2');
            // console.log(li_list);


            // （4）document.getElementsByName       通过name属性获取dom对象
            // 返回值：伪数组---长成了数组的样子 但是不能使用数组的方法
            // 参数：  name属性的值
            // var li_list = document.getElementsByName('l3');
            // console.log(li_list);


            // （5）document.querySelector           通过选择器获取dom对象
            // 返回值： 是一个对象
            // 参数 ：  选择器
            // var li = document.querySelector('#l1');
            // console.log(li);


            // （6）document.querySelectorAll        通过选择器获取dom对象
            // 返回值：伪数组---长成了数组的样子 但是不能使用数组的方法
            // 参数 ：  选择器
            var li_list = document.querySelectorAll('.l2');
            console.log(li_list);

        </script>

    </body>
</html>